
<div data-role="page" id="items">

    <script>
        // outside ready function so that buttons still have a var to attach function calls to like slider.next()
        var slider;

        $(document).one('pageshow',function(){
            console.log('PAGESHOW');

            var date = new Date();

            //create multiple date scrollers in tabular input
            //invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
            var data = {
                preset: 'date',
                startYear: date.getFullYear(),
                endYear: date.getFullYear() + 10,
                dateFormat: 'mm/dd/yyyy',
                theme: 'default',
                display: 'model',
                mode: 'scroller',
                dateOrder: 'mmD ddy'
            };
            //max number of offers is 10, so we create 10 scroller for start date, and 10 for end date.
            //drawback here is the performance, need to improve!
            //In order to make mobiscroll plugin working with tabular input, textField's id must follow this format input name="Offer[0][start_date]" id="Offer_0_start_date"
            //input name="Offer[0][expiry_date]" id="Offer_0_expiry_date"
            for (var i=0;i<10;i++) {
                $("#Offer_" + i + "_start_date").scroller(data);
                $("#Offer_" + i + "_expiry_date").scroller(data);
            }

            // slider
            slider = new Swipe(document.getElementById('slider'), {
                callback: function(e, pos) {

                    var i = bullets.length;
                    while (i--) {
                        bullets[i].className = ' ';
                    }
                    bullets[pos].className = 'on';

                }
            }),
               bullets = document.getElementById('position').getElementsByTagName('em');
        });

    </script>

    <div data-theme="a" data-role="header">
        <?php echo CHtml::link("Back",array("site/dashboard"),array("data-icon"=>"home"))?>
        <h3>Offers</h3>
    </div>

    <div data-role="content" data-theme="a" id="home">
        <!-- change clistview to normal rendering code. ClistView produce unwanted html div tags.
         Yii::app()->controller->renderPartial('_form', array('index' => $i, 'model' => $item, 'widget' => $this));
         If you are using a renderPartial you probably need to set the processOutput parameter to true (renderPartial('view',$params,false,true);
        -->
        <div id='slider' style="visibility: visible;">
            <ul>
                <?php
                $models = $dataProvider->getData();
                foreach($models as $i => $item)
                    Yii::app()->controller->renderPartial('_form', array('index' => $i, 'model' => $item, 'widget' => $this));
                ?>

            </ul>

            <nav>
                <a href='#' id='prev' onclick='slider.prev();return false;'><em> < </em></a>
                <?php
                echo "<span id='position'><em class='on'>&bull;</em>";
                for($a=0; $a<$i; $a++) {
                    echo "<em>&bull;</em>";
                }
                echo "</span>";
                ?>
                <a href='#' id='next' onclick='slider.next();return false;'><em> > </em></a>
            </nav>

        </div><!--end slider -->


    </div> <!-- end content -->

    <?php $this->renderPartial("//site/footer")?>
    <!-- /footer -->

    <script>

        $("div#items").on('pageshow', function(){
            console.log('PAGESHOW file upload');

            // Initialize the jQuery File Upload widget:
            $('#fileupload0').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        uploaded(0, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar0').val(speed);
                }
            });

            $('#fileupload1').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        uploaded(1, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar1').val(speed);
                }
            });

            $('#fileupload2').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        uploaded(2, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar2').val(speed);
                }
            });


            $('#fileupload3').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        uploaded(3, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar3').val(speed);
                }
            });

            $('#fileupload4').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        uploaded(4, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar4').val(speed);
                }
            });

            $('#fileupload5').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        uploaded(5, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar5').val(speed);
                }
            });

            $('#fileupload6').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        uploaded(6, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar6').val(speed);
                }
            });

            $('#fileupload7').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        alert("fileupload7");
                        uploaded(7, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar7').val(speed);
                }
            });

            $('#fileupload8').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        uploaded(8, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar8').val(speed);
                }
            });

            $('#fileupload9').fileupload({
                dataType: 'json',

                done: function (e, data) {
                    $.each(data.result.files, function (index, file) {
                        uploaded(9, file);
                    });
                },

                progress: function (e, data) {
                    var speed = parseInt(data.loaded / data.total * 100, 10);
                    $('#progBar9').val(speed);
                }
            });

            function uploaded(id, file){
                console.log("entered uploaded function");
                $("#fname"+id).val(file.name);
                $("img#Add"+id).attr("src","images/Stack.png");
                $("#fileupload"+id).attr('disabled','disabled');
                $("img#Del"+id).on("click", {tag: id}, btnDelete)
            }

            function btnDelete(event) {
                var id=event.data.tag;
                Delete(id);
            }

        });

        function Delete(id){
            alert("Delete Picture" + id);
            $("img#Add"+id).attr("src","images/Photos.png");
            $("#fileupload"+id).attr('disabled',false);
            $("img#Del"+id).off("click");
            $("#progBar"+id).val(0);
            $("#fname"+id).val("default.jpg");
        }

    </script>

</div>
<!-- /page -->


